<h1>最新电影</h1>
<button>点击获取</button>
<ul></ul>

<script>
    // 获取input绑定值改变事件
    let btnObj = document.querySelector('button')
    btnObj.onclick = function () {
        // 事件处理函数  ajax 4步骤
        // 第一步： 创建xhr对象
        const xhr = new XMLHttpRequest
        // 第二步： 监听请求状态
        xhr.onreadystatechange = function () {
            // 如果等于4 表示后端发送数据回来了
            if (xhr.readyState === 4) {

            }
            // 状态码200表示请求发送成功
            if (xhr.status === 200) {
                let res = xhr.responseText
                // 3 事件处理函数中 -> 拿到数据之后
                res = JSON.parse(res)
                //  清空ul数据 防止后续第二次累计
                let ulObj = document.querySelector('ul')
                ulObj.innerText = ''
                //  遍历 -> 造li -> 追加到ul中   results
                if (!Array.isArray(res.data.films)) return
                res.data.films.forEach(item => {
                    let liObj = document.createElement('li')
                    liObj.innerHTML = `${item.filmId} - ${item.name} <img src="${item.poster}" />`
                    ulObj.appendChild(liObj)
                })
            } else {
                alert(xhr.status)
            }

        }





        // 第三步： 设置请求方式、 请求地址 open    
        xhr.open('get', `https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3576785`)
        xhr.setRequestHeader('X-Client-Info',
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"1640005088441707321622529","bc":"310100"}')
        xhr.setRequestHeader('X-Host', 'mall.film-ticket.film.list')
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
        // 第四步： 发送 send
        xhr.send(null)
    }
</script>